/**
 * ColorPicker
 */

 var colorPickerProvider = require("../../../provider/colorPickerProvider");
// var dataProvider = require("../../provider/dataProvider");
 var tool = require("../../../../utils/tool");
 var storage = require("../../../../utils/storage");
 var React = require("react");
 var ColorPicker = React.createClass({
    getInitialProps: function (){
        return {
            root: {},
            data: {}
        }
    },
    componentWillMount: function (){
        this.storeData = {};
    },
    componentDidMount: function (){
        var me = this;

        this.initElements();
        this.elements.colorpicker.one('focus', function (){
            new colorPickerProvider(me.elements.colorpicker, function (color){
                me.updateColor(color);
            });
        });
    },
    handleOnChangeColor: function (e){
        var data = this.props.data;
        var root = this.props.root;
        var element = $(e.target || e.srcElement);
        var isInput = element.is("input");
        var type = element.attr("name"), val = isInput ? element.val() : element.attr("data-color");

        data = tool.rebuildWidgetData(data, type, val);
        this.updateWidget(data);
    },
    updateWidget: function (data){
        var root = this.props.root;
        var page = storage.data.page;
        dataProvider.updateWidget(data, function (){
            root.updateWidgetsByPage(page);
        });
    },
    updateColor: function (color){
        var data = this.props.data;
        var type = "color", val = color;
        var root = this.props.root;

        this.storeData = tool.rebuildWidgetData(data, type, val);
        this.updateWidget(this.storeData);
    },
    initElements: function (){
        this.elements = {
            colorpicker: $(this.refs.colorpicker)
        };
    },
    render: function (){
        var data = this.props.data;
        return (
            <div className="rowlist">
                <label className="pull-left">{$._("Color")}</label>
                <input style={{ background: "#" + data.color, color: "#" + data.color }} ref="colorpicker" name="color" type="text" className="colordiv form-control" readOnly maxLength="6" size="6" data-colorpicker="F70454 8CFF05 03DDFF FFCD00 8C00FF" />
                <input onChange={this.handleOnChangeColor} name="color" type="text" className="widget-color form-control" value={data.color} maxLength="6" size="6" />
                <div className='color-presets'>
                    <div name="color" onClick={this.handleOnChangeColor} data-color="F70454" className="color-preset CF70454" style={{backgroundColor: "rgb(247, 4, 84)"}}></div>
                    <div name="color" onClick={this.handleOnChangeColor} data-color="8CFF05" className="color-preset C8CFF05" style={{backgroundColor: "rgb(140, 255, 5)"}}></div>
                    <div name="color" onClick={this.handleOnChangeColor} data-color="03DDFF" className="color-preset C03DDFF" style={{backgroundColor: "rgb(3, 221, 255)"}}></div>
                    <div name="color" onClick={this.handleOnChangeColor} data-color="FFCD00" className="color-preset CFFCD00" style={{backgroundColor: "rgb(255, 205, 0)"}}></div>
                    <div name="color" onClick={this.handleOnChangeColor} data-color="8C00FF" className="color-preset C8C00FF" style={{backgroundColor: "rgb(140, 0, 255)"}}></div>
                </div>
            </div>
        )
    }
 });

 module.exports = ColorPicker;
